layui.use(['table', 'form', 'layer', 'jquery','tree', 'util'], function () {
    var form = layui.form,
        layer = layui.layer,
        table = layui.table,
        tree = layui.tree,
        $ = layui.jquery,
        util = layui.util;;

    //异步表格初始化
    table.render({
        id: 'SysRoleTable',
        elem: '#tab',
        //异步请求
        method: 'get',
        url: '/sysRole/findPage',
        height: "full-90",
        //分页
        page: true,
        //表格上方普通工具栏
        toolbar: "#complain_toolbar",
        //每页行数
        limit: 5,
        //设置表头
        cols: [[
            {type: 'checkbox', width: 50, fixed: 'left'},
            {field: 'roleId', title: '角色编号', minWidth: 100, fixed: 'left', align: 'center'},
            {field: 'roleName', title: '角色名称', minWidth: 100, align: 'center'},
            {field: 'roleDesc', title: '角色描述', minWidth: 100, align: 'center'},
            {field: 'roleFlag', title: '角色状态', minWidth: 100, align: 'center',templet: function (d) {
                    var result = ''
                    switch (d.roleFlag) {
                        case 1:
                            result = '<span style="color: #00a2ff">正常</span>';
                            break;
                        case 0:
                            result = '<span style="color: crimson">禁用</span>';
                            break;
                    }
                    return result;
                }},
            {title: '操作', minWidth: 120, fixed: 'right', align: 'center', toolbar: '#barDemo'}
        ]],
        //分页工具栏中每页行数选择器
        limits: [5, 10, 20, 30],
        //res 即为后台响应的数据
        parseData: function (res) {
            return {
                //解析接口状态
                'code': res.code,
                //解析提示文本
                'msg': res.message,
                //解析数据长度
                'count': res.data.total,
                //解析数据列表
                'data': res.data.list
            };
        },
        request: {
            //页码的参数名称，默认：page
            pageName: 'pageNum',
            //每页数据量的参数名，默认：limit
            limitName: 'pageSize'
        },
        response: {
            //规定成功的状态码，默认：0
            statusCode: 200
        }
    });

    //条件查询
    $('.searchBtn').click(function () {
        tableReload();
    });

    //行工具事件
    //注：tool 是工具条事件名，obj 是 table 原始容器的属性 lay-filter="对应的值"
    table.on('tool(tab)', function (obj) {
        //获得当前行数据
        var data = obj.data;
        //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var layEvent = obj.event;

        if (layEvent === 'edit') {
            //点击编辑按钮
            addOrEdit(data.roleId);
        } else if(layEvent === 'editRight'){
            //点击编辑权限按钮
            editRight(data.roleId);
        } else if (layEvent === 'remove') {
            //点击删除按钮
            remove(data.roleId);
        }
    });

    /**
     * 编辑权限的函数
     * @param roleId 角色id
     */
    function editRight(roleId){
        //打开面板
        var index = layer.open({
            type: 1,
            area: ["400px", "500px"],
            title: '编辑权限',
            closeBtn: 1,
            move: false,
            content: $("#editTree"),
            maxmin: true, //最大最小化
        });
        //通过ajax从后端得到所有权限信息(父子级关系数据)
        $.ajax({
            url: '/sysRight/editRight',
            dataType: 'json',
            type: 'post',
            success: function (data) {
                //成功则渲染树形组件
                tree.render({
                    elem: '#funTree'
                    , data: data
                    , showCheckbox: true  //是否显示复选框
                    , id: 'ids'
                    , isJump: true //是否允许点击节点时弹出新窗口跳转
                });

                //勾选有的权限
                $.ajax({
                    url: '/sysRight/getAllRight/' + roleId,
                    type: 'get',
                    success: function (data) {
                        tree.setChecked('ids', data); //勾选指定节点
                    }
                });

                //按钮事件
                util.event('lay-demo', {
                    getChecked: function (othis) {
                        var treecheckdata = tree.getChecked('ids');//获取选中节点的数据
                        var nodeIds = new Array();
                        nodeIds = getCheckedId(treecheckdata);
                        // 测试
                        $.ajax({
                            url:"/sysRight/updateRight/"+nodeIds+"/"+roleId,
                            type:"POST",
                            success:function(msg){
                                layer.close(index);
                            }
                        });

                        // 获取选中节点的id
                        function getCheckedId(jsonObj) {
                            var id = "";
                            $.each(jsonObj, function (index, item) {
                                if (id !== "") {
                                    id = id + "," + item.id;
                                } else {
                                    id = item.id;
                                }
                                var i = getCheckedId(item.children);
                                if (i !== "") {
                                    id = id + "," + i;
                                }
                            });
                            return id;
                        }
                    }
                });
            }
        });
    }

    //表格头部上方的普通工具栏中按钮事件：根据按钮中lay-event中的属性值判断
    table.on("toolbar(tab)", function (obj) {
        //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var layEvent = obj.event;

        if (layEvent === 'add') {
            //点击添加按钮
            addOrEdit();
        } else if (layEvent === 'removeBatch') {
            //点击批量删除按钮
            removeBatch();
        }
    });

    //单条删除函数
    function remove(rightCode) {
        layer.confirm('确定要禁用吗?', function () {
            //通过异步请求删除
            $.ajax('/sysRole/remove/' + rightCode, {
                type: 'delete',
                success: function (res) {
                    if (res.code === 200) {
                        layer.msg(res.message);
                        //表格重载
                        tableReload();
                    }
                }
            });
        });
    }

    //批量删除函数
    function removeBatch() {
        //获取表格选中数据状态
        var checkStatus = table.checkStatus('SysRoleTable');
        //获取选中数据
        var checkData = checkStatus.data;
        if (checkData.length === 0) {
            layer.msg('请选择要禁用的角色');
        } else {
            layer.confirm('确定要禁用吗?', function () {
                var array = [];
                checkData.forEach(function (item) {
                    array.push(item.roleId);
                });
                $.ajax('/sysRole/remove?array=' + array.join(), {
                    type: 'delete',
                    success: function (res) {
                        if (res.code === 200) {
                            layer.msg(res.message);
                            //表格重载
                            tableReload();
                        }
                    }
                });
            });
        }
    }

    //删除按钮事件
    $('.removeBtn').click(function () {
        removeBatch();
    })

    //指定窗口状态
    var window_index = -1;
    //添加的函数
    function addOrEdit(roleId) {
        layer.open({
            type: 1,
            title: roleId ? '角色编辑' : '角色新增',
            content: $('#data-main'),
            btn: ['确定', '取消'],
            maxmin: true, //最大最小化
            //点击确定按钮事件
            yes: function (index) {
                window_index = index;
                $('.submitBtn').click();
            },
            //点击弹出层显示之后事件
            success: function () {
                //新增和编辑窗体打开后，加载窗体中的动态表单数据
                if (roleId) {
                    $.ajax('/sysRole/find/' + roleId, {
                        type: 'get',
                        success: function (res) {
                            if (res.code === 200) {
                                form.val('dataForm', res.data);
                            }
                        }
                    });
                }
            },
            //点击弹出层隐藏之后事件
            end: function () {
                window_index = -1;
                //清空表单
                $('#dataForm')[0].reset();
            }
        });
    }

    /*//加载父节点数据(动态下拉框)，follow为回调函数
    function loadParent(follow) {
        $.ajax('sysUser/find', {
            type: 'get',
            success: function (res) {
                var str = '<option value="0">请选择</option>';
                res.data.forEach(function (item) {
                    str += '<option value="' + item.rightCode + '">' + (item.parentRightText ? item.parentRightText : '无') + ':' + item.rightText + '</option>';
                });
                $('#rightParentCode').html(str);
                //更新dataForm表单中select组件的渲染
                form.render('select', 'dataForm');
                //如何保证多个异步请求的执行顺序: 第一个异步执行完成才执行第二异步
                follow();
            }
        });
    }*/

    //表单提交事件(添加/修改界面确定按钮点击事件)
    form.on('submit(submitBtn)', function (data) {
        //当前容器的全部表单字段，名值对形式：{name: value}
        var url = '/sysRole/add';
        var method = 'post';
        //标题为权限编辑则为编辑，否则为新增
        if ($(".layui-layer-title").text().trim() === "角色编辑") {
            url = '/sysRole/edit';
            method = 'put';
        }
        $.ajax(url, {
            type: method,
            contentType: 'application/json',
            data: JSON.stringify(data.field),
            success: function (res) {
                if (res.code === 200) {
                    layer.close(window_index);
                    layer.msg(res.message);
                    tableReload();
                }
            }
        });
        //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        return false;
    });

    //表格重载
    function tableReload() {
            table.reload('SysRoleTable', {
            where: {
                roleName: $('#roleName').val()
            }
        });
    }

});